<template>
	<!-- <view>
		这里是支付页面
	</view> -->
	<view class="box">
		<view class="head">
			等待支付
		</view>
		<view v-if="!addressInfo.name" class="address" @click="gosite">去选择收货地址</view>
		<view v-else class="address" @click="gosite">
			<view>姓名:{{addressInfo.name}}电话号码:{{addressInfo.phoneNumber}}</view>
			<view>收货地址: {{addressInfo.province}}-{{addressInfo.city}}-{{addressInfo.region}}{{addressInfo.detailAddress}}</view>
		</view>
		<view class="content">
			<view class="item">
				<view class="item-head">
					<view>订单编号:{{orderBase.orderSn}}</view>
					<view>等待支付</view>
				</view>
				<view class="item-content" v-for="item in PreOrderById" :key="item.id">
					<image :src="item.productPic" mode=""></image>
					<view class="r">
						<view class="title">
							<view>{{item.productName}}</view>
							<view>￥{{item.productPrice}}元</view>
						</view>
						<view class="con">
							<view>编号:</view>
							<view>X{{item.productQuantity}}</view>
						</view>
						<view class="bottom">
							<view>规格:</view>
							<view v-for="(el,index) in item.productAttr" :key="index">{{el.key}}:{{el.value}}</view>
						</view>
					</view>
					
				</view>
				<view class="num">
					<view>合计:{{orderBase.totalAmount}}元</view>
				</view>
				<view class="btn" @tap="gopayments"><view>确认付款</view></view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import {getPreOrderById,addConfirmOrder} from "../../../../api/mine/car/index.js"
	import {findAllAddress} from "../../../../api/mine/address/index.js"
	import mix from "@/mixins/index.js"
	export default {
		name:"payment",
		mixins:[mix],
		data() {
			return {
				PreOrderById:[],
				orderBase:[],
				//预存的地址
				addressInfo:{},
				//获取的购物id
				id:"",
			};
		},
		methods:{
			init(){
				//首先判断之前有没有存储过地址
				this.initfindAllAddress();
				this.getOrderInfo();
			},
			//初始化预选地址
			initfindAllAddress(){
				var addressInfo=uni.getStorageSync("selectAddress");
				if(addressInfo){
					this.addressInfo=addressInfo
				}
			},
			getOrderInfo(){
				// 查询详细的订单列表
				getPreOrderById(this.id).then(res=>{
					console.log(res)
					// 循环遍历那一长串规格
					res.data.orderItems.forEach(ele=>{
						ele.productAttr=JSON.parse(ele.productAttr)
					})
					this.PreOrderById=res.data.orderItems;
					this.orderBase=res.data.orderBase;
				})
			},
			pays(){
				var orderItemList=[];
				this.PreOrderById.forEach(ele=>{
					var obj={
						"cartId": ele.cartId,
						"productId": ele.productId,
						"productQuantity":ele.productQuantity,
						"productSkuId":ele.productSkuId
					}
					orderItemList.push(obj)
				})
				var obj={
					 "addressId":this.addressInfo.id,
					  "orderId":this.id,
					  "orderItemList":orderItemList,
					  "payType": 0,
					  "sourceType":1
				}
				addConfirmOrder(obj).then(res=>{
					console.log(res)
					if(res.success){
						uni.navigateTo({
						url:`/pages/home/goods/payment/payments/payments?id=${res.data.orderId}`
					})
					}
					
				})
			},
			//跳转页面到地址栏
			gosite(){
				uni.navigateTo({
					url:`../../../mine/site/site?type=select`
				})
			},
			//跳转到支付页面
			gopayments(){
				this.pays();
			}
		},
		onLoad(e){
			//获取到购物车列表
			this.id=e.id;
			
		},
		onShow(){
			//检查是否登录
			this.checkLogins(this.init);
		}
	}
</script>

<style lang="scss" scoped>
.box{
	width: 100%;
	// height: 100vh;
	background-color:#F1ECE7;
	padding-bottom: 15px;
	.head{
		font-size: 18px;
		    color: #494949;
		    height: 44px;
		    border-bottom: 1px solid #ccc;
		    line-height: 44px;
		    margin: 0 30px;
		    box-sizing: border-box;
	}
	.address{
		font-size: 14px;
		    color: #494949;
		    border-bottom: 1px solid #ccc;
		    margin: 0 30px;
		    box-sizing: border-box;
		    padding: 15px 0;
	}
	.content{   
			.item{
				width: 336px;
				box-sizing: border-box;
				padding: 18px;
				border-radius: 12px;
				background-color: #fff;
				margin: 15px auto;
				font-size: 12px;
				color: #3e3e3e;
				.item-head{
					border-bottom: 1px solid #f1ece7;
					    padding-bottom: 15px;
					display: flex;
					justify-content: space-between;
				}
				.item-content{
					border-bottom: 1px solid #f1ece7;
					    padding: 15px 0;
					display: flex;
					image{
						width: 81px;
						    height: 81px;
					}
					.r{
						width: 235px;
						    margin-left: 14px;
						.title{
							    font-size: 13px;
							    line-height: 37px;
								display: flex;
								justify-content: space-between;
							
						}
						.con{
							font-size: 11px;
							    color: #8d8d8d;
							    line-height: 15px;
							    margin-top: 2px;
								display: flex;
							justify-content: space-between;
						}
						.bottom{
							font-size: 11px;
							    color: #8d8d8d;
							    line-height: 15px;
							    margin-top: 2px;
						}
					}
				}
				.num{
					font-size: 13px;
					    line-height: 18px;
					    text-align: right;
					    margin-top: 7px;
				}
				.btn{
					font-size: 13px;
					    line-height: 18px;
					    margin-top: 7px;
					view{
						width: 62px;
						    height: 25px;
						    border: 1px solid #2d4f43;
						    font-size: 13px;
						    border-radius: 5px;
						    color: #2d4f43;
						    text-align: center;
						    line-height: 25px;
						    margin-left: 16px;
					}
				}
			}
			
	}
}
</style>
